<template>
	<view style="position: relative;">
	<lsj-upload 
	style="position: absolute;left: -50px;top: 5px;"
	    ref="lsjUpload"
	    childId="upload1"
	    :width="width"
	    :height="height"
	    :option="option"
	    :size="size"
	    :formats="formats"
	    :debug="debug"
	    :instantly="instantly"
	    @progress="onprogress"
		@uploadEnd="onuploadEnd"
	    @change="onChange">
	        <view class="btn" :style="{width: width,height: height}">选择附件</view>
	</lsj-upload>
	
	<view class="padding">
	
	  <!--  <view>文件名称：</view> -->
	
	    <!-- #ifndef MP-WEIXIN -->
	    <view v-for="(item,index) in files.values()" :key="index">
	        <!-- <image style="width: 100rpx;height: 100rpx;" :src="item.path" mode="widthFix"></image> -->
	        <!-- <text>{{item.path}}</text> -->
			<br>
	        <text>文件名：{{item.name}}</text>
	        <text style="margin-left: 10rpx;">大小：{{item.size}}</text><br>
	        <!-- <text style="margin-left: 10rpx;">状态：{{item.type}}</text> -->
	        <text style="margin-left: 10rpx;">进度：{{item.progress}}</text>
	        <!-- <text style="margin-left: 10rpx;" v-if="item.responseText">服务端返回演示：{{item.responseText.code}}</text> -->
	        <text @click="clear(item.name)" style="margin-left: 10rpx;padding: 0 10rpx;border: 1rpx solid #007AFF;">删除</text>
	    </view>
	    <!-- #endif -->
	
	    <!-- #ifdef MP-WEIXIN -->
	    <!-- <view v-for="(item,index) in wxFiles" :key="index">
	        <text>{{item.name}}</text>
	        <text style="margin-left: 10rpx;">大小：{{item.size}}</text>
	        <text style="margin-left: 10rpx;">状态：{{item.type}}</text>
	        <text style="margin-left: 10rpx;">进度：{{item.progress}}</text>
	        <view>
	            <button>删除</button>
	        </view>
	    </view> -->
	    <!-- #endif -->
	
	</view>
	</view>
</template>

<script>
	import {getToken} from '@/utils/auth.js'
	export default {
	    data() {
	        return {
	            // 上传接口参数
	            option: {
	                // 上传服务器地址，此地址需要替换为你的接口地址
	                url: 'http://101.132.141.5:8081/common/upload',
	                // 上传附件的key
	                name: 'file',
	                // 根据你接口需求自定义请求头
	                header: {
	                    'Authorization': "Bearer " + getToken(),
	                    'uid': '27682',
	                    'client': 'app',
	                    'accountid': 'DP',
	                },
	                // 根据你接口需求自定义body参数
	                formData: {
	                    // 'orderId': 1000
	                }
	            },
	            // 选择文件后是否立即自动上传，true=选择后立即上传
	            instantly: true,
	            // 必传宽高且宽高应与slot宽高保持一致
	            width: '150rpx',
	            height: '70rpx',
	            // 限制允许选择的格式，空串=不限制，默认为空
	            formats: '',
	            // 文件上传大小限制
	            size: 30,
	            // 文件回显列表
	            files: new Map(),
	            // 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
	            wxFiles: [],
	            // 是否打印日志
	            debug: true,
	
	            // 演示用
	            tabIndex: 0,
	            list:[], 
	        }
	    },
	    onReady() {
	        setTimeout(()=>{
	            console.log('----演示动态更新参数-----');
	            this.$refs.lsjUpload.setData('formData.orderId','动态设置的参数');
	
	            console.log('以下注释内容为-动态更新参数更多演示，放开后可查看演示效果');
	            // 修改option对象的name属性
	            this.$refs.lsjUpload.setData('name','myFile');
	
	            // 修改option对象的formData内的属性
	            // this.$refs.lsjUpload.setData('formData.appid','1111');
	
	            // 替换option对象的formData
	            // this.$refs.lsjUpload.setData('formData',{appid:'222'});
	
	            // option对象的formData新增属性
	            // this.$refs.lsjUpload.setData('formData.newkey','新插入到formData的属性');
	
	            // ---------演示初始化值，用于已提交后再次编辑时需带入已上传文件-------
	            // 方式1=传入数组
	            let files1 = [{
	                    name: '1.png'
	                },
	                {
	                    name: '2.png',
	                }];
	
	            // 方式2=传入Map对象
	            // let files2 = new Map();
	            // files2.set('1.png',{name: '1.png'})
	
	            // 设置初始files列表
	            this.$refs.lsjUpload.setFiles(files1);
	
	        },2000)
	    },
	    methods: {
	        // 某文件上传结束回调(成功失败都回调)
	        onuploadEnd(item) {
	            console.log(`${item.name}已上传结束，上传状态=${item.type}`);
	
	            // 更新当前状态变化的文件
	            this.files.set(item.name,item);
	
	            // 演示上传完成后取服务端数据
	            if (item['responseText']) {
	                console.log('演示服务器返回的字符串JSON转对象');
	                this.files.get(item.name).responseText = JSON.parse(item.responseText);
					console.log(this.files);
					 this.$emit('update',this.files)
	            }
	
	            // 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
	            // #ifdef MP-WEIXIN
	            this.wxFiles = [...this.files.values()];
	            // #endif
	
	            // 强制更新视图
	            this.$forceUpdate();
	
	            // ---可删除--演示判断是否所有文件均已上传成功
	            let isAll = [...this.files.values()].find(item=>item.type!=='success');
	            if (!isAll) {
	                console.log('已全部上传完毕');
	            }
	            else {
	                console.log(isAll.name+'待上传');
	            }
	
	        },
	        // 上传进度回调
	        onprogress(item) {
	            // 更新当前状态变化的文件
	            this.files.set(item.name,item);
	
	            console.log('打印对象',JSON.stringify(this.files.get(item.name)));
	            // 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
	            // #ifdef MP-WEIXIN
	            this.wxFiles = [...this.files.values()];
	            // #endif
	
	            // 强制更新视图
	            this.$forceUpdate();
	
	        },
	        // 文件选择回调
	        onChange(files) {
	            // 更新选择的文件
	            this.files = files;
				
	            // 强制更新视图
	            this.$forceUpdate();
	
	            // 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
	            // #ifdef MP-WEIXIN
	            this.wxFiles = [...this.files.values()];
	            // #endif
	        },
	        // 手动上传
	        upload() {
	            // name=指定文件名，不指定则上传所有type等于waiting和fail的文件
	            this.$refs.lsjUpload.upload();
	        },
	        // 移除某个文件
	        clear(name) {
	            // name=指定文件名，不传name默认移除所有文件
	            this.$refs.lsjUpload.clear(name);
	        },
	
	        /**
	         * 以下为演示
	         */
	        // DOM重排演示，重排后组件内部updated默认会触发show方法,若特殊情况未能触发updated也可以手动调用一次show()
	        // 什么是DOM重排？自行百度去~
	        add() {
	            this.list.push('DOM重排测试，往页面插入一条数据');
	            this.$nextTick(()=>{
	                this.$refs.lsjUpload.show();
	            })
	        },
	        // 切换视图演示，APP端因为是webview，层级比view高，
	        // 此时若不希望点击触发选择文件，需要手动调用hide()
	        // 手动调用hide后，需要调用show()才能恢复触发面
	        onTab(tabIndex) {
	            this.tabIndex = tabIndex;
	
	            if (tabIndex == 0 ) {
	                this.$nextTick(()=>{
	                    this.$refs.lsjUpload.show();
	                })
	            }
	            else {
	                this.$refs.lsjUpload.hide();
	            }
	        },
	        // 打开nvue窗口
	        open() {
	            uni.navigateTo({
	                url: '/pages/nvue-demo/nvue-demo'
	            });
	        }
	    }
	} 
</script>

<style>
	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 130rpx;
		line-height: 130rpx;
		text-align: center;
		font-size: 32rpx;
		background-color: #3F536E;
		color: #fff;
		z-index: 9999;
	}
	.content {
		padding-top: 130rpx;
	}
	.flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.inputs {
		height: 100rpx;
		border-bottom: 1rpx solid #808080;
	}
	.padding {
		position: relative;
		top:-20px;
		left: 30px;
		padding-top: 30rpx;
		padding-left: 30rpx;
		padding-bottom: 50rpx;
	}
	.tab {display: flex;padding: 30rpx;}
	.tab view {height: 100rpx;line-height: 100rpx;flex: 1;text-align: center;border: 1rpx solid #2C405A;}
	.btn {
		position: absolute;
		top: 0px;
		left:0px;
		height: 50rpx;
		background-color: #007AFF;
		color: #fff;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}
	.ts {
		line-height: 2em;
	}
	.nbtn {
		margin: 100rpx 50rpx;
	}
</style>